
<template>
  <div>
    <el-card>
      <template #header>
        <span>库存盘点管理</span>
        <el-button type="primary" style="float: right;" @click="showCreateDialog = true">
          创建盘点任务
        </el-button>
      </template>
      
      <el-table :data="inventoryTasks" style="width: 100%">
        <el-table-column prop="id" label="任务号" />
        <el-table-column prop="store" label="门店" />
        <el-table-column prop="diffRate" label="差异率">
          <template #default="{ row }">
            <el-tag :type="row.diffRate <= 1 ? 'success' : 'danger'">
              {{ row.diffRate }}%
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)">{{ row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createdAt" label="创建时间" />
      </el-table>
    </el-card>

    <el-dialog v-model="showCreateDialog" title="创建盘点任务">
      <el-form :model="newTask" label-width="100px">
        <el-form-item label="门店">
          <el-select v-model="newTask.storeId" placeholder="请选择门店">
            <el-option label="朝阳门店" value="ST001" />
            <el-option label="静安店" value="ST002" />
          </el-select>
        </el-form-item>
        <el-form-item label="商品">
          <el-input v-model="newTask.item" placeholder="商品名称" />
        </el-form-item>
        <el-form-item label="预期数量">
          <el-input-number v-model="newTask.expected" :min="0" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showCreateDialog = false">取消</el-button>
        <el-button type="primary" @click="createTask">创建</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const inventoryTasks = ref([])
const showCreateDialog = ref(false)
const newTask = ref({
  storeId: '',
  item: '',
  expected: 0
})

const loadTasks = async () => {
  const response = await axios.get('/api/inventory/tasks')
  inventoryTasks.value = response.data
}

const createTask = async () => {
  await axios.post('/api/inventory/tasks', newTask.value)
  showCreateDialog.value = false
  loadTasks()
}

const getStatusType = (status) => {
  const types = {
    '待盘点': 'info',
    '进行中': 'warning',
    '已完成': 'success'
  }
  return types[status] || 'info'
}

onMounted(() => {
  loadTasks()
})
</script>
